<template>
  <a-modal
    v-model:visible="visible"
    title="日志详情"
    wrap-class-name="full-modal"
    width="100%"
    :zIndex="999999"
    @ok="handleOk"
    @cancel="handleOk"
    cancelText=" "
    okText="关闭"
    :maskClosable="false"
  >
    <div class="terminal-box">
      <a-spin :spinning="loading" wrapperClassName="spin-wrapper-name">
        <TerminalLog
          showToolBar
          :url="socketUrl"
          @listener-socket-status="listenerSocketStatus"
          ref="terminalLogRef"
          v-if="visible"
        />
      </a-spin>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
const emits = defineEmits(['closeModal']);
const visible = ref<boolean>(false);
const socketUrl = ref<string>('');
const terminalLogRef = ref<any>();
let loading = ref<boolean>(true);
const showModal = (data: any) => {
  visible.value = true;
  socketUrl.value = `/devops/appLog-stream?envId=${data.envId}&podName=${data.podName}`;
};

const handleOk = () => {
  visible.value = false;
  terminalLogRef.value.closeWS();
  loading.value = true;
  emits('closeModal', false);
};

const listenerSocketStatus = () => {
  loading.value = false;
};

defineExpose({
  showModal,
});
</script>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    height: calc(100% - 46px);
  }
  .terminal-box {
    width: 100%;
    height: calc(100% - 46px);
    .spin-wrapper-name {
      width: 100%;
      height: 100%;
      .ant-spin-container {
        width: 100%;
        height: 100%;
        .terminal {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
